<template>
  <el-drawer
    class="drawer-detail"
    :title="drawerDetail.msgTitle"
    :visible.sync="drawerVisible"
    direction="rtl"
    append-to-body
    size="600px"
    :before-close="drawerClose">
    <div class="drawer-time">{{drawerDetail.updateTime}}</div>
    <el-divider content-position="left">内容</el-divider>
    <el-scrollbar class="drawer-scroll">
      <div class="drawer-box" :style="{height: contentHeight}" v-html="msgContent"></div>
    </el-scrollbar>

  </el-drawer>
</template>
<script>
  import {getObj,markObj} from '@/api/message/my-msg'
  export default {
    props:{
      msgId:{
        default: '',
      },
      show:{
        type: Boolean,
        default: false,
      }
    },
    data(){
      return {
        drawerVisible: this.show,
        drawerDetail:{},
        contentHeight: '400px',
        msgContent: null
      }
    },
    watch:{
      show(val){
        this.drawerVisible = val
        if (val){
          // this.getDetail()
        }else{
          this.$store.dispatch("getUnreadMsg")
        }

      },
      msgId(){
        this.getDetail()
      },
      drawerVisible(val){
        this.$emit('update:show', val)
      }
    },
    created() {
      this.contentHeight = document.documentElement.clientHeight -160 + 'px'
    },
    methods:{
      getDetail(){
        getObj(this.msgId).then(res => {
          this.drawerDetail = res.data.data
          this.msgContent = this.keepSpace(res.data.data.msgContent)
          if (res.data.data.receiverReadStatus != 1){
            markObj(this.msgId).then(res => {
              // this.getList(this.page)
              this.$emit('updateList')
            })
          }
        })
      },
      //保留多个空格
      keepSpace(detail){
        let matchResult = null;
        // 空格在正则中可以使用\u0020表示
        while(matchResult = detail.match(/\u0020{2,}/)){
          let replaceString = '';
          for(let i=0; i<matchResult[0].length; i++){
            replaceString += '&nbsp;';
          }
          detail = detail.replace(matchResult[0],replaceString);
        }
        return detail;
      },
      //关闭弹窗
      drawerClose(done){
        done()
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/variables.scss';
  .drawer-detail /deep/ .el-drawer__header{
    margin-bottom: 0;
  }
  .drawer-time{
    padding-left: 20px;
    font-size: 12px;
    color: #999;
  }
  .drawer-scroll{
    overflow: hidden;
    border: 1px solid #ddd;
    border-color: $theme-color;
    border-radius: 4px;
    margin: 20px;
  }
  .drawer-box{
    padding: 0 20px 20px 20px;
    color: #333;



  }
</style>
